<template>
	<div>
		<!-- 热门城市 -->
		<div class="hcity">
			<div class="hcity-title">
				热门城市
			</div>
			<div class="hcity-list">
				<ul  v-for ="(item,index) in hotCities" :key="index">
 					<li @click="changeCityName(item.name)">{{item.name}}</li>
				</ul>
			</div>	
		</div>
		<!-- 字母排序-->
		<div class="sort"    >
			<div class="sort-title" >
				字母排序
			</div>
			<div class="sort-list">
				<ul  v-for ="(item,index) in city" :key="index">
					<li>{{item.initial}}</li>
				</ul>
			</div>
		</div>
		<!-- 城市首字母列表  -->
		<div class="list">
			<div v-for ="(item,index) in city" :key="index">
				<div class="list-title" >{{item.initial}}</div>
				<ul class="list-list"   >
					<li  @click="changeCityName(item.name)"  v-for ="(item,index) in city.[index].list" :key="index">
						{{item.name}}
					</li>
				</ul>
			</div>
		</div>
	</div>	
</template>

<script>
	//引入vuex的mu
	import {mapMutations} from 'vuex'
	export default {
		props:['hotCities','city'],
		methods:{
			changeCityName(cityName){
				this.changeCity(cityName)
				this.$router.push('/')
			},		
			//导出mutation里面的changeCity()函数
		...mapMutations(['changeCity'])
		},
	}
</script>

<style scoped>
	/*  */
	.sort{
		width: 100%;
		font-size: 0.28rem;
	}
	.sort-title{
		padding: 0.25rem 0.35rem;
	}
	.sort-list{
		background-color: white;
		overflow: hidden;  /* 溢出隐藏*/
	}
	/* 在li标签之前；创建一个虚拟标签，覆盖在ul上方；避免标签之间的内容冲突 */
	
	.sort-list li{
		width: 16.666%;
		height: 0.9rem;
		text-align: center;
		line-height: 0.9rem;
		float: left;
		position: relative;
	}
	/*  */
	.hcity{
		width: 100%;
		font-size: 0.28rem;
	}
	.hcity-title{
		padding: 0.25rem 0.35rem;
	}
	.hcity-list{
		background-color: white;
		overflow: hidden;  /* 溢出隐藏*/
		position: relative;
	}
	/* 在li标签之前；创建一个虚拟标签，覆盖在ul上方；避免标签之间的内容冲突 */
	.hcity-list:before{
		content: "";
		position: absolute;
		/* 生成一个宽度与li同宽，高度与ul同高的虚拟标签*/
		width: 33.333%;
		height: 100%;
		/* 移动一个li宽度的位置：为了每一行的第二个li */
		left: 33.333%;
		border-left: 1px solid #ddd;
		border-right: 1px solid #ddd;
	}
	.hcity-list li{
		width: 33.333%;
		height: 0.9rem;
		text-align: center;
		line-height: 0.9rem;
		float: left;
		border-bottom: 1px solid #ddd;
		position: relative;
		
	}
	/* <!-- 城市首字母列表 --> */
	.list{
		width: 100%;
		font-size: 0.28rem;
	}
	.list-title{
		padding: 0.25rem 0.35rem;
	}
	.list-list{
		background-color: white;
		overflow: hidden;  /* 溢出隐藏*/
		position: relative;
	}
	/* 在li标签之前；创建一个虚拟标签，覆盖在ul上方；避免标签之间的内容冲突 */
	.list-list:before{
		content: "";
		position: absolute;
		/* 生成一个宽度与li同宽，高度与ul同高的虚拟标签*/
		width: 25%;
		height: 100%;
		/* 移动一个li宽度的位置：为了每一行的第二个li */
		left: 25%;
		border-left: 1px solid #ddd;
		border-right: 1px solid #ddd;
		
	}
	.list-list:after{
		content: "";
		position: absolute;
		width: 25%;
		height: 100%;
		left: 50%;
		/* border-left: 1px solid #ddd; */
		border-right: 1px solid #ddd;
		/* position: relative; */
	}
	.list-list li{
		width: 25%;
		height: 0.9rem;
		text-align: center;
		line-height: 0.9rem;
		float: left;
		border-bottom: 1px solid #ddd;
		position: relative;
	}
	
</style>
